<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>

    <!-- <div class="a b c">
        文本内容片断1
        <p class="c">
            文本内容片断2
        </p>
        文本内容片断3
        <p class="d">
            文本片断内容4
            <span>文本片断内容5</span>
        </p>
    </div> -->


    <script>
        // 请构建工具方法，可以依据如下数据结构创建出如上元素DOM树 （数据深度未知）
        // let a = document.createTextNode("asdasdasda") 将文本创建成节点
        // dom.appendChild(a)  // 上述代码构建的节点对象可以作为 appendChild 的参数使用
        let vnode = {
            tag: "div",
            class: ["a", "b", "c"],
            children: [
                "文本内容片断1",
                {
                    tag: "p",
                    class: "c",
                    children: [
                        "文本内容片断2",
                    ]
                },
                "文本内容片断3",
                {
                    tag: "p",
                    class: "d",
                    children: [
                        "文本片断内容4",
                        {
                            tag: "span",
                            children: [
                                "文本片断内容5"
                            ]
                        }
                    ]
                }
            ]
        };

        function createElement(vnode) {
            var dom = document.createElement(vnode.tag);//div
            if (vnode.class && Array.isArray(vnode.class)) {//判断class是有值的并且是数组
                dom.className = vnode.class.join(" ");
            } else if (vnode.class && typeof vnode.class == "string") {//判断class是有值的并且是string
                dom.className = vnode.class;
            }
            for (let node of vnode.children) {
                let cdom;
                if (typeof node == "string") {
                    cdom = document.createTextNode(node);

                } else {
                   cdom= createElement(node);
                }
                dom.appendChild(cdom);
            }


            return dom;

        }
        let res=createElement(vnode);
        document.body.appendChild(res);

    </script>
</body>

</html>